<template>
    <ul class="imgBox" ref="ulRef" @click="swiper" >
        <li v-for="(item,index) in props.list" 
            :key="index" 
            :style="{ '--index':index }"
            :id="'liIndex'+index"
            >
            <div>
                <img :src="item.cover"/>
            </div>
        </li>
    </ul>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
interface Props{
    list:[{
        cover:string,
    }]
}
const props = defineProps<Props>()
const emit = defineEmits(['findImgInfo'])
const ulRef = ref()

function swiper(e:Event){
    
    const parentId = findLi(e.target)
    let childList = Array.from(ulRef.value.children) as Array<HTMLElement>
    let nodeIndex = childList.findIndex(el => el.id === parentId) as number
    emit('findImgInfo',childList[nodeIndex].firstChild?.firstChild.src.slice(5))
    if (childList[nodeIndex].previousElementSibling) {
        setNext(childList[nodeIndex])
        childList.forEach((el,index) => {
            if (index < nodeIndex - 1) {
                el.style.left =  1000 +'px'
                el.style.zIndex = ( childList.length + index ).toString()
                let firstNode = el.cloneNode(true) as HTMLElement
                ulRef.value.removeChild(el)
                ulRef.value.appendChild(firstNode)
            }
            if (el !== childList[nodeIndex] && el !== childList[nodeIndex].previousElementSibling){
                el.style.left = (index - nodeIndex) * 200 +'px'
                el.style.opacity = '1'
            } 
        })

    } else { 
        childList.forEach((el,index) => {
            if (index === nodeIndex) {
                let lastNode = childList[childList.length - 1]
                ulRef.value.removeChild(lastNode)
                el.insertAdjacentElement("beforebegin", lastNode);
                setNext(childList[nodeIndex])                 
            }
            if ( index !== nodeIndex && index !== (childList.length - 1)) {
                el.style.left = (index - nodeIndex) * 200 +'px'                    
            }
        })
    }
}
//递归找到父节点为li的id  --待尾递归优化
function findLi(e:EventTarget | null):string | undefined{
    let parentNode = e?.offsetParent
    if (!parentNode) {
        console.log('该节点不存在')
        return
    }
    if (parentNode.nodeName === "LI") {
        return parentNode.id
    } else {
       return findLi(parentNode)
    }
}
//点击下一个
function setNext(node:HTMLElement) {
    node.previousElementSibling.style.left = '0px'
    node.previousElementSibling.style.opacity = '0.7'
    node.previousElementSibling.style.scale = '1'
    node.previousElementSibling.style.zIndex = '2'
    node.style.left = '40px'
    node.style.scale = '1.1'
    node.style.zIndex = '3'
    node.style.opacity = '1'
}
</script>

<style lang="scss" scoped>
.imgBox{
    margin: 0;
    padding: 0;
    height: 120px;
    display: flex;
    justify-content: start;
    list-style: none;
    position: relative;
    & li{
        margin-top: 15px;
        position: absolute;
        left: calc(var(--index) * 160px);
        transition: all .5s;
    }
    & li:nth-child(1){
        scale: 1.1;
    }
    & li div{
        position: relative;
        @include flexRowCenter;
        background: rgb(255, 255, 255,0.3);
        width: 150px;
        height: 100px;
        border-radius: 10px;
    }
    & li div img{
        position: absolute;
        width: 140px;
        height: 90px;
        border-radius: 8px;
    }
}
.showImg{
    left: 30px;
    scale: 1.1;
}
.befortImg{
    left:0;
    opacity: 0.7;
    scale: 1;
}
</style>